<template>
	<z-paging
		ref="page"
		v-model="dataList"
		@query="query"
	>
		<view class="pageCountainer">
			<view
				class="pageCountainer_orderItem"
				v-for="item in dataList"
				:key="item.id"
				@click="toNext(item)"
			>
				<view class="pageCountainer_orderItem_top">
					<!-- <view class="pageCountainer_orderItem_top_title">{{ item.productName }}</view> -->
					<view>
						<u-text
							:text="item.productName"
							bold
							size="28rpx"
							color="#3d3d3d"
							lines="1"
						/>
					</view>
					<u-icon
						bold
						name="arrow-right"
						size="26rpx"
						color="#3D3D3D"
					/>
				</view>

				<view class="pageCountainer_orderItem_bottom">
					<view>
						<u-text
							:text="item.orderTime"
							color="#777777"
							size="24rpx"
						/>
					</view>
					<view>
						<u-text
							mode="price"
							:text="item.amount"
							color="#3D3D3D"
							size="28rpx"
							bold
						/>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import { orderList } from "@/api/health_service.js"
	export default {
		data() {
			return {
				dataList: [],
				customerPhone:''
			}
		},
		onLoad(options) {
			this.customerPhone = options.customerPhone || ''
			console.log(options,'iocn8>>>>')
		},
		methods: {
			toNext(item) {
				uni.navigateTo({
					url: `/pages_my/product_order/index?orderNo=${item.orderNo}`
				})
			},
			async query(pageNum, pageSize) {
				const params = {
					pageNum,
					pageSize,
					orderType: 1,
					userPhone: this.customerPhone
				}
				const result = await orderList(params)
				this.$refs.page.complete(result.rows)
			}
		}
	}
</script>

<style lang="scss">
	.pageCountainer {
		width: 100vw;
		padding: 24rpx 32rpx;
		box-sizing: border-box;

		&_orderItem {
			display: flex;
			flex-direction: column;
			width: 686rpx;
			height: 170rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			justify-content: space-between;

			&_top {
				display: flex;
				width: 100%;
				justify-content: space-between;
				position: relative;
				align-items: center;

				&_title {
					font-size: 28rpx;
					color: #3d3d3d;
					font-weight: bold;
				}

				&_title::before {
					content: "";
					width: 10rpx;
					height: 28rpx;
					background-color: #1682ff;
					position: absolute;
					left: -24rpx;
					top: 50%;
					transform: translate(0, -50%);
				}
			}

			&_bottom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
			}
		}
	}
</style>